<template>
	<div class="one">
		<div class="center">
			<h2>框架排行（组件one）</h2>
		</div>
		<div class="">
			<ul>
				<li v-for="item in newFrames">
					<span>{{item.name}}--</span>
					<span>热度：{{item.star}}</span>
				</li>
			</ul>
			<button type="button" @click="addStar(1)">增加热度</button>
		</div>
	</div>
</template>

<script>
	import { mapState } from 'vuex'
export default {
		name:'ListOne',
		// props:['frames']
		
		// computed:{
		// 	frames(){
		// 		return this.$store.state.frames
		// 	}
		// }
		
		// computed:mapState([frames:'frames'])
		computed:{
			...mapState({
				frames:'frames',
				}),
			newFrames(){
				return this.$store.getters.changeFrames
			}
		},
		methods:{
			addStar(num){
			// this.$store.commit('addStar',num);
			 this.$store.dispatch('addStar',num);
			}
		}
	}
	
</script>

<style scoped="scoped">
	.one{
		background-color: #dae997;
		box-shadow: 1px 2px 3px rgba(0,0,0,0.2);
		margin-bottom: 30rpx;
		padding: 10px 20px;
	}
	.one ul{
		padding: 0;
		flex-direction: row;
	}
	.one li{
		display: inline-block;
		margin-right:10px ;
		margin-top: 10px;
		padding: 20px;
		background:rgba(255,255,255,0.7) ;
		
	}
	.star{
		font-weight: bold;
		color: #e289cc;
		
	}
	.center{
		width: 100%;
		text-align: center;
	}
</style>
